<template>
    <div class="hb_container">
        <ul class="hongbao_list_ul">
            <li class="hongbao_list_li" :style="{'background':`url(${bgImg}) repeat-x`,'background-color':'#fff'}" v-for="item in list" :key="item.id">
                <section class="list_item">
                    <div class="list_item_left">
                        <span :style="{'--color':color}">￥</span>
                        <span :style="{'--color':color}">{{Math.trunc(item.amount)}}</span>
                        <span :style="{'--color':color}">.</span>
                        <span :style="{'--color':color}">{{item.amount%1 *100}}</span>
                        <p>{{item.description_map.sum_condition}}</p>
                    </div>
                    <div class="list_item_right">
                        <h4>{{item.name}}</h4>
                        <p>{{item.description_map.validity_periods}}</p>
                        <p>{{item.description_map.phone}}</p>
                    </div>
                    <div class="time_left" v-if="!isExpired">
                        {{item.description_map.validity_delta}}
                    </div>
                    
                </section>
                <section class="list_item_footer" v-if="item.limit_map">
                    <p>{{item.limit_map.restaurant_flavor_ids}}</p>
                </section>
                <svg class="expired" v-if="isExpired">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#expired"></use>
                </svg>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props:{
        list:{
            type: Array,
            default(){
                return [];
            }
        },
        isExpired:{
            type:Boolean,
            default(){
                return false;
            }
        }
    },
    data(){
        return {
            color: '',
            bgImg:'',
        }
    },
    created(){
        if(this.isExpired){
            this.color = '#ccc';
            this.bgImg = require('../../assets/imgs/expired.png').default;
        }else{
            this.color = '#ff5340';
            this.bgImg = require('../../assets/imgs/hongbao.png').default;
        }
    }

}
</script>
// background: url("../../assets/imgs/"+var(--bgimg)) repeat-x;

<style lang="scss" scoped>
@import '~@styl/mixin.scss';
.hongbao_list_ul{
    .hongbao_list_li{
        position: relative;
        background-size: 0.5rem 0.2rem;
        background-color: #fff;
        margin-top: 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.5rem;
        .list_item{
            padding: 1rem 0.5rem 0.8rem;
            display: flex;
            .list_item_left{
                font-size: 0;
                flex: 1;
                border-right: 0.025rem dotted #ccc;
                span:nth-child(1){
                    @include sc(.75rem, var(--color));
                    font-weight: bold;
                }
                span:nth-child(2){
                    @include sc(1.25rem, var(--color));
                }
                span:nth-child(3),span:nth-child(4){
                    @include sc(0.8rem, var(--color));
                    font-weight: bold;
                }
                p{
                    @include sc(0.45rem,#999);
                }
            }
            .list_item_right{
                flex: 2;
                margin-left: 1.5rem;
                h4{
                    @include sc(0.7rem ,#666);
                    margin-left: -.7rem;
                }
                p{
                    @include sc(.4rem, #999);
                    margin-left: -.7rem;
                }
            }
            .time_left{
                @include sc(.75rem, #ff5340);
            }
        }
        .list_item_footer{
            background: #f9f9f9;
            padding: 0.4rem;
            border-bottom-left-radius: 0.25rem;
            border-bottom-right-radius: 0.25rem;
            p{
                list-style-type: disc;
                @include sc(.4rem, #999);
            }
        }
        .expired{
            position: absolute;
            top: 0.6rem;
            right: 0.2rem;
            fill: #ddd;
            @include wh(3rem, 3rem);
        }
    }
    .hongbao_list_li:nth-of-type(1){
        margin-top: 0;
    }
}
</style>